<template>
  <view>
    <u-popup :show="show" @close="close" mode="bottom" round="10" :closeable="false" closeOnClickOverlay>
      <view class="popDialog">
        <view class="pop_title"> 请选择自提门店 </view>
        <scroll-view scroll-y="true" class="scroll">
          <view
            class="store-item"
            v-for="(item, index) in storeInfo.storeList"
            :key="index"
            @click="selectPickupPoint(item)"
          >
            <view class="left">
              <view class="name flex">
                <text class="font-weight-6">{{ item.store_name }}</text>
                <text v-if="item.distance">({{ item.distance }}km)</text>
              </view>
              <view class="info">
                <view class="font-24 c-89"> 营业时间：{{ item.open_date }} </view>
                <view class="font-24"> 地址：{{ item.full_address }}{{ item.address }} </view>
              </view>
            </view>
            <view class="icon">
              <image
                :src="$util.img('image/radio2.png')"
                mode=""
                class="radio"
                v-if="item.store_id == orderPaymentData.delivery.store_id"
              ></image>
              <image :src="$util.img('image/radio.png')" mode="" class="radio" v-else></image>
            </view>
          </view>
        </scroll-view>
        <view class="submit" @click="popupConfirm()">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "chooseStore",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    storeInfo: {
      type: Object,
      default: () => {},
    },
    orderPaymentData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    selectPickupPoint(item) {
      this.$emit("selectPickupPoint", item);
    },
    close() {
      this.$emit("close");
    },
    popupConfirm() {
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.popDialog {
  border-radius: 20rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffefe5 0%, #f5f6f7 22%);
  padding: 30rpx 24rpx;

  .pop_title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .scroll {
    height: 500rpx;
    margin-bottom: 50rpx;
  }
  .submit {
    width: 702rpx;
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    border-radius: 20rpx;
    background: $color-title2;
    color: #fff;
  }
}

.store-item {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  .left {
    width: 90%;
  }
  .info {
    line-height: 1.2;
  }
  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    text-align: right;
  }
}

.radio {
  width: 34rpx;
  height: 34rpx;
}
</style>
